<template>
 <div style="position:relative">
  <div class="pagetitle">{{photoAlbumName}}</div>
  <div class="pageSecondtitle">{{photoAlbumDesc}}</div>
  <div style="margin-top:60px;position: relative;background:#fff">
  <v-container >
    <!-- 相册列表 -->
      <div class="photo-wrap">
        <img
          v-for="(item, index) of photoList"
          class="photo"
          :key="index"
          :src="item"
          @click="preview(index)"
        />
      </div>

  </v-container>
  </div>
    </div>


</template>

<script>
export default {
    created(){
    this.infiniteHandler();
  },
  data: function() {
    return {
      photoAlbumName: "",
      photoAlbumCover: "",
      photoList: [],
      current: 1,
      size: 100
    };
  },
  created(){
    this.infiniteHandler()
  },
  methods: {
    preview(index) {
      this.$imagePreview({
        images: this.photoList,
        index: index,
      });
    },
    infiniteHandler() {
      this.axios
        .get("/albums/" + this.$route.params.albumId + "/photos", {
          params: {
            current: this.current,
            size: this.size
          }
        })
        .then(({ data }) => {
          this.photoAlbumCover = data.data.photoAlbumCover;
          this.photoAlbumName = data.data.photoAlbumName;
          this.photoAlbumDesc = data.data.photoAlbumDesc;

          if (data.data.photoList.length) {
            this.current++;
            this.photoList.push(...data.data.photoList);
          }
        });
    }
  },
  computed: {
  }
};
</script>

<style scoped>
.photo-wrap {
  display: flex;
  flex-wrap: wrap;
}
.photo {
  margin: 3px;
  cursor: pointer;
  flex-grow: 1;
  object-fit: cover;
  height: 200px;
}
.photo-wrap::after {
  content: "";
  display: block;
  flex-grow: 9999;
}
@media (max-width: 759px) {
  .photo {
    width: 100%;
  }
}
</style>
